<template>
  <div class="login-container">
    <div class="banner">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
               label-position="left">
        <h3 class="title">注册</h3>
        <el-form-item prop="mobile">

          <el-input v-model="loginForm.mobile" name="mobile" type="text" auto-complete="on" placeholder="用户名(手机号)">
            <template slot="prepend">
              <span class="svg-container">
                <svg-icon icon-class="user"/>
              </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :type="pwdType"
            v-model="loginForm.password"
            name="password"
            auto-complete="on"
            placeholder="密码"
            @keyup.enter.native="handleLogin">
            <template slot="prepend">
              <span class="svg-container">
                <svg-icon icon-class="password"/>
              </span>
            </template>
          </el-input>
          <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye"/>
        </span>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" auto-complete="on" placeholder="验证码">
            <template slot="append">
              <el-button :disabled="code_status" @click="getCode" style="width: 120px;">{{code_text}}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-checkbox v-model="checked"></el-checkbox>
        <a style="margin-left: 10px" @click="showModel">我已阅读并同意《E招招聘用户注册服务协议及隐私条款》</a>
        <el-form-item style="margin-top: 20px">
          <el-form-item style="margin-top: 0px">
            <el-button :loading="loading" type="primary"
                       style="width:100%;background-color: #3ea751;border-color: #3ea751;"
                       @click.native.prevent="handleLogin">
              注册
            </el-button>
            <!--<span style=" width: 100%;text-align: center;display: block;line-height: 20px;">or</span>-->
            <el-button style="width:100%;background: #2b2b36;position: relative;height: 40px;margin: 10px auto;" @click.native.prevent="">
              <router-link to="login" class="btn-link edit-btn"
                           style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;line-height: 40px;">
                登陆
              </router-link>
            </el-button>

          </el-form-item>
        </el-form-item>
      </el-form>
      <el-dialog
        title="E招注册协议"
        :visible.sync="dialogVisible"
        :fullscreen="false"
        width="80%"
        :modal="false"
        >
        <span>E招招聘用户注册服务协议及隐私条款<br>
特别提示：<br>
E招用户注册服务协议及隐私条款（下称：“本协议”）由名称为“E招招聘”的互联网招聘应用程序所属主体：杭州易企招企业管理有限公司和您签订（下称：“本公司”），本公司通过自有互联网技术、商标、软件著作等知识产权为您提供协议所述服务和发生业务关系，本协议具有合同法律效力。<br>
在注册并使用E招招聘服务（下称“本服务”）前，您应当认真阅读并遵守本协议。<br>
请您务必审慎阅读并充分理解各条款内容，特别是免除或者限制责任的条款、争议解决和法律适用条款、用户信息隐私条款。以上条款以加粗字体显示的，您应重点阅读。除非您已阅读并接受本协议所有条款，否则您无权使用本软件服务。您使用本服务即视为您已阅读并同意本合作服务协议的约束。<br>
一、定义<br>
1.1 E招招聘：杭州易企招企业管理有限公司旗下运营和管理的招聘行业辅助性互联网招聘工具，是包括但不限于域名为“http：//hr-ez.com”的Web站点、名称为“E招招聘”的微信公众号和名称为“E招招聘”的手机终端应用软件的合称。本公司通过以上软件程序为招聘企业、求职人才、人力资源负责人等注册用户提供包含但不限于：企业招聘需求的发布与管理，人才简历的完善与管理，人才库的信息共享与维护，账户的管理与维护，增值服务板块的信息发布与审核。<br>
1.2 企业端用户：指通过E招平台注册并认证的，具有合法主体资质的企业或个体，其中个体代表企业行使招聘权利的，应具备完全民事行为能力，与企业主体共同承担因使用不当造成的企业主体、求职人才和善意第三方等所造成的直接和间接损失或损害，本公司不承担任何责任，若对本公司造成损失或损害的，本公司保留向用户追偿的权利。<br>
1.3 人才端用户：指通过E招招聘注册并认证的，具有完全民事行为能力的自然人求职者。<br>
1.4 共享人才库：指认同E招人才共享招聘理念的企业端用户和人才端用户，通过E招招聘，将所掌握余量求职人才信息共享到平台人才库，共享、共同维护的线上人才库。本公司仅向以上用户提供软件功能的使用和维护升级，用户因使用该功能造成的对其他任何一方的损失或损害，本公司不承担任何责任。<br>
二、服务条款的确认和接受<br>
2.1 用户须确认，在完成注册流程或以其他E招招聘平台许可的方式使用E招平台的服务时，应当是具备相应民事行为能力的自然人、法人或其他组织。如果不具备前述主体资格（如用户在18周岁以下），只能在父母或监护人的监护参与下才能使用E招招聘服务，且用户及其监护人应承担因此而导致的一切后果；对于违反本协议所述条款，对平台产生不良影响的，本公司有权单方面无条件注销用户账户并追究其相关法律责任。<br>
2.2 当您在求职招聘过程中直接或间接享受服务的同时，您也承认了您拥有相应的权利能力和行为能力。您对求职招聘过程中的企业信息、人才信息的真实性、合法性负责，并能够独立承担法律责任。<br>
2.3 用户确认，本协议是处理双方权利义务责任的约定依据，除非违反国家强制性法律，否则始终有效。本公司保留在中华人民共和国法律允许的范围内独自决定是否拒绝提供服务、关闭用户账户或向合法第三方提供数据作为用户违法证据的权利。<br>
2.4 本协议内容包括协议正文及所有E招招聘已经发布的或将来可能发布的各类条款、规则。所有条款、规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。除另行明确声明外，任何E招招聘及其关联公司提供的服务，均受本协议约束。您承诺接受并遵守本协议的约定，如果您不同意本协议的约定，您应立即停止注册程序或停止使用本服务。<br>
2.5 E招招聘有权根据国家法律法规的更新、产品和服务规则的调整，不时地制订、修改本协议或各类条款、规则，并进行更新公示。如您继续使用E招招聘服务的，即表示您接受经修订的协议、条款和规则。<br>
<br>
三、服务内容<br>
E招招聘提供的基础服务即：企业招聘人才和人才求职企业信息对接。E招招聘利用互联网信息技术，搭建了人才共享招聘互联网工具，充分挖掘人才求职信息，通过平台注册用户快速形成人才与企业的信息对接，以此满足企业的人才招聘需求，人才的求职需求。E招招聘仅作为平台第三方，提供系统功能的完善、优化、维护，系统数据的监管、审核，用户账户的管理、维护、安全。最大限度维护平台信息的合法性、真实性、有效性。<br>
具体包括：<br>
3.1企业端用户和人才端用户的注册、认证、账户、信息发布与管理服务；<br>
3.2企业端用户的人才简历筛选、人才共享、信息获取、信息管理、账户管理服务；<br>
3.3人才端用户的企业岗位筛选、人才共享、信息获取、信息管理、账户管理服务；<br>
3.4广告推送、营销推广服务；<br>
3.5 E招招聘提供的其他关联性服务；<br>
<br>
四、权利、义务和责任约定<br>
4.1 E招平台的权利与义务<br>
    4.1.1 平台应根据注册用户需求，分配操作权限，对注册用户各项操作提供技术和数据支持。<br>
    4.1.2 平台有权利根据管理的需求或市场的变化增加、减少或变更对乙方提供的服务内容、条款。<br>
    4.1.3 如遇涉及公安机关、相应主管部门或善意第三方介入调查等情况出现，平台有义务配合相关部门提供注册用户的相关数据信息并协助调查，无需征得相关注册用户的口头或书面同意。<br>
   4.1.4 E招招聘有权利定期或不定期对平台服务涉及用户信息进行保全性整理、存储、备份；并结合运营所需，进行相关信息的数据追踪、同步、反馈、分析，并以此形成平台商业运营数据支持；平台为了获取利润以支撑系统稳定健康存续，可基于商业运营数据分析，具有针对性的进行注册用户及关联用户系统信息推送、广告推送、营销推广，平台拥有通过电话、短信、邮件、APP系统消息推送的权利。<br>
   4.1.5 E招招聘并不直接参与注册用户之间的沟通、面试、入职及后续人力资源服务，注册用户因招聘过程造成争议、纠纷的，应当自行协商处理，处理不成的可寻求E招招聘的调解处理，在争议处理过程中，应自主保存相关数据信息、证据、资金明细等的截图、语音、视频留存，以与平台作为中立第三方的数据库记录进行比对，来完成争议的调解处理。<br>
    4.2注册用户的权利与义务<br>
    4.2.1 注册用户应严格遵守平台服务和合作条款；否则，平台有权根据本协议中相关条款进行追责和处理，包括但不限于单方面临时或永久禁止已注册用户系统账户并解除本协议。<br>
    4.2.2 本协议长期效期，平台注册用户服务的延续即代表着协议的延续。平台本着开放、自由的合作理念，不限制注册用户与平台具有竞争关系或具有潜在竞争关系的公司或个人签署相同或类似的合作协议或合同。<br>
    4.2.3注册用户应妥善保管注册信息、用户名、登录密码、支付密码（如有）的安全。应对通过注册账户和密码实施的平台行为负责，因使用不当，造成的任何损失或损害，E招招聘不承担任何责任，并保留向用户追偿的权利。<br>
    4.2.4严禁利用E招招聘提供的服务进行发布、传播、储存属于诽谤、淫秽、威胁、辱骂性、毁损他人或其他非法或者违反社会公序良俗的信息；<br>
<br>
五、违约处理<br>
5.1. 任何一方没有履行或没有完全履行或没有适当履行本协议下的任何义务，或者违反本协议的任何条款，无论是由于主观意愿或是客观情况，均构成违约（以下简称“违约”，违约的一方以下简称“违约方”，其他非违约方以下简称“履约方”）。<br>
5.2. 违约方应赔偿因其违约而给履约方造成的一切实际的损失、损害、费用或责任。若各方都有过错，则应根据实际的情况，本着协商解决的态度，分别承担各自的责任和损失。<br>
<br>
六、隐私条款<br>
在您使用E招招聘服务的过程中，经您提交和填写的信息及数据，您在使用软件过程中的操作习惯、使用频率等，以上数据我们可能会收集部分或全部并整理、分析、存储在系统服务器，目的是为了向所有用户提供更优化的服务。E 招招聘承诺并尊重用户隐私数据的保护，此条款我们将向您介绍并希望您了解，我们收集了那些信息及数据，如何使用这些信息及数据，如何保护这些信息及数据。<br>
6.1用户基础信息：您在注册过程中，使用的联系方式，企业名称，个人姓名，职位职称等基础用户信息，将成为您注册有效ID账户使用E招招聘服务的基本条件，您默认我们有权将此信息进行数据存储、查询、统计，以满足您的后续登陆并使用服务的支持。<br>
6.2 企业认证信息：企业端用户在注册完成后，为获取更大的软件操作权限，对企业ID进行必要的信息完善，企业资质上传认证及企业招聘负责人个人实名认证的信息上传，经后台审核通过后，系统会给企业分配对应的认证标示，我们有权基于企业认证信息进行必要的第三方信息接口查询与核实，对该类信息删除与销毁，存储与备份，旨在营造互联网招聘平台的企业信息真实性、有效性和准确性，为求职者提供有效的信息参考。<br>
6.3 人才认证信息：人才端用户在注册完成后，为获取更大的软件操作权限，对人才ID进行必要的信息完善，包含个人身份信息上传及实名认证操作所必须的信息要素，人才通过系统提交的学历信息、工作经验、人才测评信息等，我们有权基于人才认证信息进行必要的第三方信息接口查询与核实，对该类信息删除与销毁，存储与备份，旨在营造互联网招聘平台的人才信息真实性、有效性和准确性，为企业方提供有效的信息参考。<br>
6.4 简历信息：E招招聘作为互联网求职与招聘服务平台，您自主将您的简历信息通过模板或文件附件形式上传并存储在系统数据库。注册或付费企业用户使用E招招聘服务，可以通过我们的服务查询检索到您的简历。当您在E招招聘中完善简历和个人信息，并对这些信息进行提交时，您已经同意E招招聘合法使用该类简历信息，并公开展示给平台服务的招聘企业或个体，平台在您的同意下，拥有法律上许可的，对您的简历进行查询及使用的权利。对于因此而引起的任何法律纠纷（包括但不限于招聘企业或个体非法使用、转载、记录前述公开简历信息），E招招聘不承担任何法律责任。<br>
6.5 用户软件使用信息：我们可能会搜集您在E招招聘使用过程中的操作习惯、使用频率、地理位置、手机联系人信息等，涉及软件功能需求的，只有在您同意授权的情况下才会进行，若您不同意授权软件的相关功能，您需在手机操作系统上或第三方平台上进行操作关闭，若没有关闭，则默认软件拥有您的授权并运行对应的后台功能。<br>
6.6 信息安全与使用：E招招聘将严格遵守本协议隐私条款，遵循“合法、正当、必要”的原则来使用您的信息。您的信息将仅用于收集时即已确定并且经过您同意的目的，如有除此之外的任何其他用途，我们都会提前征得您的同意。我们会尽最大力度保障您的信息安全，不被恶意第三方盗取、使用，如软件技术的升级与创新，服务器的安全运维与管理，但因不可抗力导致的信息泄露、损毁、丢失（如战争、自然灾害、大规模的黑客攻击、网络运营商基础服务中断等），本公司不承担任何责任。<br>
<br>
七、服务条款的变更、生效和终止<br>
本公司有权随时对本协议内容或发布的其他服务条款进行修改变更，变更时本公司将在包含但不限于网页公告、应用软件系统消息提示、显著位置更新提示等方式通知注册用户，变更自发布之时即刻生效，如注册用户继续使用本公司提供的服务即视为同意相关内容及条款的变更，如注册用户不同意变更后的内容及条款则有权停止使用E招招聘提供的服务、提取账户资金（若有）并申请注销账户，本协议从注销时即刻终止。<br>
          <br>
八、法律管辖和适用<br>
8.1 本条款的订立、执行和解释及争议的解决均应适用中国法律。<br>
8.2 如双方就本条款内容或其执行发生任何争议，双方应尽力友好协商解决；协商不成时，任何一方均可向本公司所在地的人民法院提起诉讼。<br>
8.3 本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。<br>
8.4 本协议条款无论因何种原因部分无效或不可执行，其余条款仍有效，对双方具有约束力。<br>
                               杭州易企招企业管理有限公司<br>
                                2018年11月1日更新<br>
</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
      <div class="clearboth" style="clear: both"></div>
    </div>
    <div class="copyright" style="text-align: center;color: #FFF"><span>浙ICP备17056522号-1  copyright 2017-2019 E招招聘</span></div>

  </div>
</template>

<script>
  import {isvalidUsername} from '@/utils/validate'
  import {register} from '@/api/web/auth'
  import {verifyCode} from '@/api/web/auth'
  import {Message} from 'element-ui'

  export default {
    name: 'Login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback()
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (value.length < 5) {
          callback(new Error('密码不能小于5位'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          mobile: '',
          password: '',
          code: ''

        },
        dialogVisible:false,
        checked: true,
        loginRules: {
          mobile: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePass}],
          code: [{required: true, trigger: 'blur', message: '验证码是必須的'}],
        },
        code_text: '获取验证码',
        code_status: false,
        loading: false,
        pwdType: 'password',
        redirect: undefined
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      handleLogin() {
        if (!this.check) {
          Message.warning("请先同意注册协议")
        }
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            register(this.loginForm).then(res => {
              this.loading = false
              Message.success("注册成功")
              this.$router.push({path: 'login'})
            }).catch(err => {

            })

          } else {
            console.log('error submit!!')
            return false
          }
        })
      }, 
      getCode() {

        // 校验手机号合法性
       var mobile = this.loginForm.mobile


        this.code_status = true
        let time = 60;
        this.code_text = time
        let _this = this
        let timer = setInterval(() => {
          if (time >= 1) {
            _this.code_text = time -= 1
          } else {
            clearInterval(timer)
            _this.code_status = false
            _this.code_text = "获取验证码"
          }
        }, 1000)
        verifyCode(mobile).then(res => {
          if (res.code != 0) {
            Message.error("获取验证码失败" + res.msg)
          } else {
            Message.success("获取验证码成功")
          }
        }).catch(err => {
          Message.error("获取验证码失败" + res.msg)
          clearInterval(timer)
          _this.code_status = false
          _this.code_text = "获取验证码"
        })

      }, 
      showModel() {
        this.dialogVisible=true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #2d3a4b;
  $light_gray: #eee;
  .banner {
    /*background: #080818 url(https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/login/loginpage/images/bg_banner412d83.png);*/
    left: 0;
    right: 0;
    width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 12vw auto;
    background-repeat: no-repeat;
  }

  .el-form-item {
    /*margin-bottom: 0;*/

  }

  .el-form-item__content {
    line-height: normal;
    margin: 2px 0;
  }

  .el-input-group__prepend {
    background-color: #2b2b36;
    border: 1px solid #9595ad;
  }

  .el-input__inner {
    background-color: #2b2b36;
    border: 1px solid #9595ad;
  }

  .el-input-group__append {
    background-color: transparent;
    border: 1px solid #9595ad;
    color: #dee4e7;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  .login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background: $bg url("../../assets/bg1.jpg") center/100% 100% no-repeat;
    .login-form {
      width: 420px;
      padding: 35px 35px 15px 35px;
      background: #2b2b36;
      position: relative;
      margin: auto;
      /*float: right;*/
      /*margin-right: 20%;*/
      /*height: 290px;*/
      /*margin-bottom: 100px;*/
      border-radius: 5px;
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: #dee4e7;
      margin: 0px auto 10px auto;
      text-align: center;
      font-weight: bold;

    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }
</style>
